<!--  -->
<template>
  <div>
    <div class="home">
      <commonHeader></commonHeader>
      <div class="content">
        <el-card>
          <div class="box_title">
            <h1>{{ book.书名 }}</h1>
          </div>

          <div class="boxList">
            <div class="bokts">
              <div class="pro"><img width="100%" :src="getimg(book)" /></div>
              <div class="bokts_list">
                <div class="list clearfix">
                  <ul class="text01">
                    <li><span>作者：</span>{{ book.作者 }}</li>
                    <li><span>出版日期：</span>{{ book.出版日期 }}</li>
                    <li><span>出版社：</span>{{ book.出版者 }}</li>
                    <li><span>页数：</span>{{ book.页码 }}</li>
                    <!-- <li><span>所属分类：</span><a target="_blank" href="/ebook/list_123__page_1.html">思维科学</a></li> -->
                  </ul>
                  <ul class="text02">
                    <li>
                      <b id="readCount">{{ book.downnum }}</b
                      >次下载
                    </li>
                    <li>
                      <b id="readCount">{{ book.previewnum }}</b
                      >次阅读
                    </li>
                  </ul>
                  <ul class="text03">
                    <li class="edit"></li>
                    <li class="share"></li>
                  </ul>
                </div>

                <div class="coll_top">
                  <div
                    @click="read(item)"
                    class="yuedu startYd"
                    style="width: 100px; background: rgb(152, 23, 34); margin: 0px"
                  >
                    <span class="yuIcon icon1"></span
                    ><a style="color: rgb(255, 255, 255)">在线阅读</a>
                  </div>
                  <div @click="down(item)" class="yuedu" style="left: 470px">
                    <span class="yuIcon icon3"></span><a>下载</a>
                  </div>
                </div>

                <div class="reader_center"></div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </el-card>
      </div>
      <commonFooter />
    </div>
    <onlinereadProgress ref="onlinereadref" />
  </div>
</template>

<script>
import commonHeader from './common/header.vue';
import commonFooter from './common/footer.vue';
import { getimg, getsrcpre } from '@/utils/common';
import onlinereadProgress from '@/views/common/onlinereadProgress.vue';
import { getbookbyid } from '@/api/book';
export default {
  name: '',
  components: { commonHeader, commonFooter, onlinereadProgress },
  props: [],
  data() {
    return {
      book: {},
      id: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    this.getbookbyid(this.id);
  },
  methods: {
    async getbookbyid() {
      var { data } = await getbookbyid({ id: this.id });
      this.book = data;
      console.log('6666', data);
    },
    //获取图片
    getimg(item) {
      return getimg(item);
    },
    getsrcpre(item) {
      return getsrcpre(item);
    },
  },
};
</script>
<style lang='css' scoped>
.content {
  min-height: 680px;
  width: 1200px;
  margin: 60px auto;
}
.box_title {
  height: 56px;
  line-height: 56px;
  width: 960px;
  margin: 0 auto;
}
.boxList {
  width: 960px;
  margin: 0 auto;
  zoom: 1;
  overflow: hidden;
  padding-bottom: 20px;
  border-bottom: dashed #e8e8e8 1px;
}
.bokts {
  /* width: 684px; */
  float: left;
}
.bokts .pro {
  width: 180px;
  height: 212px;
  float: left;
  position: relative;
  margin-right: 20px;
}
.bokts .bokts_list {
  float: right;
  width: 514px;
  line-height: 24px;
  padding-top: 4px;
}
.bokts .text01 {
  width: 222px;
  float: left;
  color: #555;
}
.bokts .bokts_list .list {
  width: 514px;
}
.coll_top {
  height: 30px;
  margin-top: 22px;
}
.coll_top .shidu {
  height: 23px;
  padding: 0 20px;
  background: #e3f5fc;
  border: solid #d0f1fd 1px;
  display: inline-block;
  color: #0285bd;
  margin: 5px 10px 0 0;
}

.leftF {
  float: left;
}
.reader_center {
  line-height: 20px;
  margin-top: 10px;
}
.icon1 {
  margin-right: 5px;
  background: url(../assets/img/detais/ts.697cbecb.png) no-repeat;
  background-size: 20px 20px;
  border-radius: 4px;
  -webkit-transform: translateY(5px) !important;
  transform: translateY(5px) !important;
}

.startYd:hover {
  background: #ab1623 !important;
}
.yuedu {
  display: inline-block;
  margin-left: 23px;
  background: #fefefe;
  border: 1px solid #981722;
  border-radius: 5px;
  width: 88px;
  height: 36px;
  text-align: center;
  cursor: pointer;
}
.yuIcon {
  -webkit-transform: translateY(7px);
  transform: translateY(7px);
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.yuedu:hover {
  background: #981722 !important;
}
.yuedu:hover a {
  color: #fff !important;
}
.yuedu a {
  display: inline-block;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #981722;
  letter-spacing: 0;
  line-height: 36px;
}
.yuedu:hover .icon3 {
  background: url()
    no-repeat;
}
.icon3 {
  background: url()
    no-repeat;
}
</style>